<template>
    <div class="page">
        <!-- navbar -->
        <div class="navbar">
            <i class="Icon" style="color: #000000;font-size: 20px;" @click="backHandle()">arrow_back_ios_new</i>
            <div style="text-align: center;">Order Check</div>
            <i class="Icon" style="color: #000000;font-size: 20px;opacity: 0;">arrow_back_ios_new</i>
        </div>

        <div class="body">

            <!-- item -->
            <div style="margin-top: 10px;padding: 0 12px;">
                <div style="display: flex;margin-top: 10px;background-color: #FFFFFF;padding: 12px;border: 1px solid #EBEBEB;align-items: center;"
                    v-for="(item,index) in foods" :key="index">
                    <image :src="item.img" mode="" style="width: 70px;height: 70px;border: 1px solid #EBEBEB;"></image>
                    <div style="flex: 1;padding-left: 12px;line-height: 16px;">
                        <!-- info -->
                        <div>
                            <div style="font-size: 14px;word-wrap: break-word;word-break: break-word;">{{item.name}}
                            </div>
                        </div>
                        <div style="padding: 0 5px;padding-top: 12px;">
                            <!-- food -->
                            <div>
                                <div style="font-size: 12px;">$</div>
                                <div style="font-size: 16px;font-weight: bold;">{{item.price}}</div>
                            </div>
                        </div>
                    </div>
                    <!-- action -->
                    <div style="padding: 0 12px;display: flex;flex-direction: column;align-items: center;">
                        <!-- btn -->
                        <div>
                            <i class="Icon" style="color: #4CD964;">add_circle</i>
                        </div>

                        <div>
                            <div style="text-align: center;">1</div>
                        </div>

                        <!-- btn -->
                        <div style="margin-top: 12px;">
                            <i class="Icon" style="color: #333333;">remove_circle_outline</i>
                        </div>
                    </div>

                </div>
            </div>

            <div style="display: flex;flex-direction: column;background-color:#007AFF;margin-top: 12px;">
                <!-- msg -->
                <divarea value="" placeholder="enter your remark" style="background-color: #FFFFFF;flex: 1;" />

            </div>
        </div>

        <div style="padding: 12px;padding-top: 0;">
            <div
                style="display: flex;align-items: center;justify-content: space-between;margin-top: 12px;padding: 0 12px;">
                <div>Totail Fee</div>
                <div>${{totalFee}}</div>
            </div>

            <!-- pay -->
            <div class="paybtn" @click="payHandle()">
                <div style="opacity: 0;">$12.00</div>
                <div>CheckOut</div>
                <div>${{totalFee}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                totalFee: 0.00,
                foods: []
            }
        },

        onLoad() {
            this.foods.map((obj, idx) => {
                console.log('====================================');
                console.log(idx);
                console.log('====================================');
                this.totalFee += parseFloat(obj.price)
            })
            console.log(this.totalFee)
        },
        methods: {
            backHandle() {
            },
            payHandle() {


            }
        }
    }
</script>

<style scoped>
    .page {
        flex: 1;
        background-color: #FFFFFF;
        display: flex;
        flex-direction: column;
    }

    .navbar {
        height: 64px;
        padding-left: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #FFFFFF;
    }

    .body {
        flex: 1;
        overflow-y: auto;
        background-color: #F5F5F5;
    }

    .paybtn {
        height: 44px;
        background-color: #74eb41;
        margin-top: 12px;
        color: #FFFFFF;
        border: none;
        box-shadow: 0 0 3px #74eb41;
        display: flex;
        align-items: center;
        justify-content: space-around
    }
</style>